<template>
  <div class="common-layout contain">
    <el-container class="contain">
      <el-header class="header">
        <div class="logo">
          <img src="../assets/logo.png">
          <span>电商后台管理系统</span>
        </div>
        <div class="user">
          <el-button @click="logout" type="danger" plain>退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside class="aside">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#001529"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              unique-opened
              router
          >
            <el-sub-menu :index="index+''" v-for="(item,index) in menuList.menus">
              <template #title>
                <el-icon>
                  <component :is="menuList.icons[item.id-1]"></component>
                </el-icon>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item :index="childItem.path" v-for="childItem in item.children">{{childItem.name}}</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
  import {useRouter} from "vue-router";
  import {ElMessage} from "element-plus";
  import api from '../api/index'
  import {onMounted,reactive} from "vue";
  import {User} from "@element-plus/icons-vue";

  const route = useRouter()
  const menuList = reactive({
    menus:[],
    icons:{
      '1':'User',
      '2':'Tools',
      '3':'Goods',
      '4':'ShoppingCartFull',
      '5':'TrendCharts',
    }
  })

  onMounted(() =>{
    get_menus()
  })

  const logout = () => {
    //退出登录,从sessionSrorage中移除token
    sessionStorage.removeItem('token')
    route.push('/login/')
    ElMessage({
      message: '退出成功',
      type: 'success',
    })
  }
  //获取菜单
  const get_menus = () =>{
    api.get_menu().then((res)=>{
      menuList.menus=res.data.data
    })
  }


</script>

<style scoped>
.header {
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  font-size: 20px;
  color: #999;
  height: 50px;
}

.logo {
  float: left;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user {
  float: right;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo img {
  width: 50px;
  height: 30px;
  margin-left: 10px;
}

.aside {
  width: 200px;
  background-color: #001529;
}

.contain {
  height: 100%;
}

</style>